<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="discipline-form">
          <div class="btn_wrapper">
            <span style="font-size: 12px; color: pink"
              >说明：目前支持学科和关键字条件筛选</span
            >
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="$router.push('/questions/new')"
              >新增试题</el-button
            >
          </div>
          <!-- 表单 -->
          <el-form ref="form" :model="form" label-width="80px" size="small">
            <!-- el-row 一行 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="学科">
                  <el-select
                    v-model="form.subjectID"
                    placeholder="请选择"
                    @change="getDetail(form.subjectID)"
                  >
                    <el-option
                      v-for="item in simpleList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录">
                  <el-select v-model="form.catalogID" placeholder="请选择">
                    <el-option
                      v-for="item in detailList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签">
                  <el-select v-model="form.tags" placeholder="请选择">
                    <el-option
                      v-for="item in tagSimpleList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字">
                  <el-input
                    v-model="form.keyword"
                    placeholder="根据题干搜索"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="试题类型">
                  <el-select v-model="form.questionType" placeholder="请选择">
                    <el-option
                      v-for="item in questionTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度">
                  <el-select v-model="form.difficulty" placeholder="请选择">
                    <el-option
                      v-for="item in difficultyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向">
                  <el-select v-model="form.direction" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in directionList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人">
                  <el-select v-model="form.creatorID" placeholder="请选择">
                    <el-option label="超级管理员" value="1"></el-option>
                    <el-option label="录入管理员" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="题目备注">
                  <el-input v-model="form.remarks"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称">
                  <el-input v-model="form.shortName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                  <el-select
                    v-model="form.province"
                    placeholder="请选择"
                    style="width: 48%; margin-right: 2%"
                    @change="getAreaList(form.province)"
                  >
                    <el-option
                      v-for="(item, index) in provincesList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="form.city"
                    placeholder="请选择"
                    style="width: 50%"
                  >
                    <el-option
                      v-for="(item, index) in areaList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6" style="text-align: right">
                <el-form-item style="margin-left: 80px">
                  <el-button size="small" @click="clear">清除</el-button>
                  <el-button size="small" type="primary" @click="search"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <!-- tabs标签页 -->
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first">
              <QuestionsTable
                @render="handleClick"
                @changePage="delChangePage"
                :question-list="questionList"
                :counts="counts"
                :name="activeName"
            /></el-tab-pane>
            <el-tab-pane label="待审核" name="second"
              ><QuestionsTable
                @render="handleClick"
                @changePage="delChangePage"
                :question-list="questionList"
                :counts="counts"
                :name="activeName"
              />
            </el-tab-pane>
            <el-tab-pane label="已审核" name="third">
              <QuestionsTable
                @render="handleClick"
                @changePage="delChangePage"
                :question-list="questionList"
                :counts="counts"
                :name="activeName"
              />
            </el-tab-pane>
            <el-tab-pane label="以拒绝" name="fourth"
              ><QuestionsTable
                @render="handleClick"
                @changePage="delChangePage"
                :question-list="questionList"
                :counts="counts"
                :name="activeName"
            /></el-tab-pane>
          </el-tabs>

          <!-- 分页 -->
          <div style="margin-top: 20px; text-align: right">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="query.pagesize"
              :current-page="query.page"
              layout="prev,pager,next,sizes,jumper"
              :total="counts"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import QuestionsTable from '@/module-hmmm/components/questions-table.vue'
import { simple } from '@/api/hmmm/subjects.js'
import { directorySimple } from '@/api/hmmm/directorys.js'
import { tagSimple } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { choice } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      activeName: 'first',
      query: {
        page: 1, // 当前页码
        pagesize: 5 // 每页显示条数
      },
      form: {
        subjectID: '', // 学科选项值
        difficulty: '', // 难度选项
        questionType: '', // 试题类型
        tags: '', // 标签选项
        province: '', // 省份选项
        city: '', // 城市选项
        keyword: '', // 关键字选项
        remarks: '', // 题目备注选项
        shortName: '', // 简称
        direction: '', // 方向选项
        creatorID: '', // 数据录入
        catalogID: '' // 二级目录
      },
      simpleList: [], // 学科简单列表
      detailList: [], // 目录列表
      tagSimpleList: [], // 标签列表
      questionTypeList: [], // 试题列表
      difficultyList: [], // 难度列表
      directionList: [], // 方向列表
      provincesList: [], // 所有城市
      areaList: [], // 区域列表
      tableLabel: [],
      allQuestion: [],

      counts: 0,
      questionList: [], // 题库列表
      name: '',
      screenState: false // 筛选状态
    }
  },
  components: {
    QuestionsTable
  },
  computed: {},
  created () {
    // 获取简单列表
    this.getSimple()
    // this.getDirectorySimple()
    this.getTypeList()
    // 全部题库列表
    this.getAllChoice()
  },
  methods: {
    // 搜索
    async search () {
      if (this.form.subjectID === '' && this.form.keyword === '') return
      // console.log(123)
      this.screenState = true
      this.handleClick()
    },
    // 获取简单列表
    async getSimple () {
      const res = await simple()
      this.simpleList = res.data
    },
    // 获取二级目录
    async getDetail (id) {
      const res = await directorySimple(id)
      const tagRes = await tagSimple(id)
      // console.log(res)
      this.detailList = res.data
      this.tagSimpleList = tagRes.data
    },
    getTypeList () {
      this.questionTypeList = questionType
      this.difficultyList = difficulty
      this.directionList = direction
      this.provincesList = provinces()
    },
    getAreaList (id) {
      this.areaList = citys(id)
    },

    // 清除
    clear () {
      this.form = {}
      this.screenState = false
      this.handleClick()
    },

    // 获取全部题库列表
    async getAllChoice () {
      const res = await choice(this.query)
      this.questionList = res.data.items
      this.counts = res.data.counts
    },
    // 调用获取列表方法,重新渲染
    ToRender (params) {
      this.activeName = params
      this.handleClick()
    },
    // tsbs切换
    async handleClick () {
      let res
      if (this.activeName === 'second') {
        res = this.screenState
          ? await choice({ ...this.form, ...this.query, chkState: 0 })
          : await choice({ page: 1, pagesize: 5, chkState: 0 })
      } else if (this.activeName === 'third') {
        res = this.screenState
          ? await choice({ ...this.form, ...this.query, chkState: 1 })
          : await choice({ page: 1, pagesize: 5, chkState: 1 })
      } else if (this.activeName === 'fourth') {
        res = this.screenState
          ? await choice({ ...this.form, ...this.query, chkState: 2 })
          : await choice({ page: 1, pagesize: 5, chkState: 2 })
      } else {
        res = this.screenState
          ? await choice({ ...this.form, ...this.query })
          : await choice(this.query)
      }
      this.questionList = res.data.items
      this.counts = res.data.counts
    },

    // 分页
    // 每页显示的条数发生改变时触发
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.handleClick()
    },
    // 页码发生改变时触发
    handleCurrentChange (changePage) {
      this.query.page = changePage
      this.handleClick()
    },
    // 删除改变分页
    delChangePage () {
      if (this.questionList.length === 1) {
        this.query.page--
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
.btn_wrapper {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
</style>
